<template>
  <div class="hidden-scrollbar">
    <!-- 主视图容器 -->
    <div style="margin-bottom: 50px; position: relative">
      <!-- 天界淡入淡出效果 -->
      <transition name="maizuo" mode="out-in" appear>
        <!-- 给CitiesView加入持久化插件 -->
        <keep-alive include="CitiesView">
          <router-view></router-view>
        </keep-alive>
      </transition>
    </div>
    <!-- 底部导航区 -->
    <BottomNavbar></BottomNavbar>
  </div>
</template>

<script>
import BottomNavbar from "./components/BottomNavbar.vue";
import "@/style/index.scss"; // 引入全局 scss 样式文件

export default {
  name: "App",
  components: { BottomNavbar },
};
</script>

<style lang="scss" scoped>
/* 主路由切换动画效果 */
.maizuo-enter-active {
  animation: maizuo 0.2s ease reverse;
}

.maizuo-leave-active {
  animation: maizuo 0.5s ease;
}

@keyframes maizuo {
  0% {
    opacity: 1;
    transform: translateY(0px);
  }

  100% {
    opacity: 0;
    transform: translateY(30px);
  }
}
</style>
